<template>
    <div class="upgrade-member-page">
        <!-- 页面标题 -->
        <van-nav-bar title="升级会员" style="background: linear-gradient(to right, #00b4ff, #6610f2); color: white; padding: 10px;" left-arrow @click-left="goBack" >
            <template #title>
                <span style="color: white;">升级会员</span>
            </template>
        </van-nav-bar>
        <!-- 会员类型列表 -->
        <div v-for="(member, index) in memberList" :key="index" class="member-item">
            <div class="member-type">
                <div style="font-size:22px;">{{member.name}}({{member.price}}/年)</div>
                <div class="member-privilege">{{member.fwnr}}</div>
            </div>
            <van-button type="primary" size="small" @click="openMember(member)">开通</van-button>
        </div>

        <div style="padding:10px;background-color:#fff;padding-bottom:10px;font-size:16px;font-weight:bold;">充值赠送</div>
        <div
            v-for="(option, index) in amountOptions"
            :key="index"
            style="width:100%;padding:10px;color:red;display:flex;flex-direction:row;align-items:center;justify-content:centermargin:10px;background-color:#fff;text-align:left;"
        >
                <div style="font-size: 16px;" >充值{{option.czje}}元</div>
                <div style="font-size: 16px;" >送{{option.zsje? option.zsje:0}}元
                </div>
        </div>
        <!-- 特别提醒和协议内容 -->
        <div class="agreement-section">
            <div class="reminder">
                特别提醒用户认真阅读本《用户服务协议》（下称《协议》）中各条款。除非您接受本《协议》条款，否则您无权使用本网站提供的相关服务。您的使用行为将视为对本《协议》的接受，并同意接受本《协议》各项条款的约束。
            </div>
            <div class="agreement-content">
            <div class="agreement-title">一、定义</div>
            <div style="font-size:15px;line-height:1.5; white-space: pre-wrap;padding:5px;">
                “用户”指符合本协议所规定的条件，同意遵守本网站各种规则、条款（包括但不限于本协议），并使用本网站的个人或机构。
            </div>
            <div style="font-size:15px;line-height:1.5; white-space: pre-wrap;padding:5px;">
                “卖家”是指在本网站上出售物品的用户。“买家”是指在本网站购买物品的用户。
            </div>
            <div style="font-size:15px;line-height:1.5; white-space: pre-wrap;padding:5px;">
                “成交”指买家根据卖家所刊登的交易要求，在特定时间内提出最优的交易条件，因而取得依其提出的条件购买该交易物品的权利。
            </div>
            </div>
        </div>
        <!-- 底部按钮 -->
        <div class="bottom-buttons">
            <van-button type="info" round @click="inquiryBusiness">询盘商机</van-button>
            <van-button type="primary" round @click="handleLxkf">联系客服</van-button>
        </div>
        <van-dialog
            v-model:show="showConfirmDialog"
            :show-confirm-button="false"
            :show-cancel-button="false"
            :cancel-button-text="取消"
            :close-on-click-overlay="true"
            :style="{ borderRadius: '0px' }"
        >
            <div>
                <!-- 商机价格和余额信息 -->
                <div style="padding:10px;font-size:14px;text-align:center;">
                    <div style="padding:5px;">账户余额：{{ zhye }} ，开通【{{ hydjname }}】,扣除年费{{nfje}} 元</div>
                    <div style="padding:5px;">有效期至{{ yxq }}</div>
                </div>
                <!-- 充值部分 -->
                <div class="recharge-section">
                    <span style="width:15%;">充值：</span>
                    <van-field style="width:70%; border: 1px solid #e4e7ed; box-sizing: border-box;" v-model="czje" size="small" :border="true" type="number" placeholder="请输入充值金额" />
                </div>
                <!-- 接单按钮 -->
                <div class="order-button-section">
                    <van-button type="default" block size="small" style="margin:10px;" @click="showConfirmDialog = false">取消</van-button>
                    <van-button type="primary" block size="small"  style="margin:10px;" @click="doPay">充值开通</van-button>
                </div>
                <!-- 提示信息 -->
                <div class="tip-section">
                    <div style="margin-bottom:10px;font-size:14px;padding:10px;color:red;">开通不可退，会员充值费用属于服务费，不可用来购买信息</div>
                </div>
            </div>
        </van-dialog>
        <van-dialog
            v-model:show="showCustomerServiceDialog"
            title="客服信息"
            :show-confirm-button="true"
            :show-cancel-button="true"
            confirm-button-text="拨打电话"
            cancel-button-text="关闭"
            @confirm="callCustomerService"
            @cancel="showCustomerServiceDialog = false"
        >
            <div style="text-align: center;">
                <p>客服电话：{{ kfdh }}</p>
                <p>客服微信：{{ kfwx }} <span style="color:blue;padding-left:20px;" @click="copyWechat(kfwx)" > 复制 </span></p>
            </div>
        </van-dialog>
</div>
    </template>

<script>
import { queryHydjinfoList, queryRecharsetting, querySysConifgByKey } from '@/api/api';
import { getHyinfo, saveRechargehy } from '../../api/api';
export default {
data() {
        return {
            memberList: [],
            showConfirmDialog:false,
            czje:'',
            zhye:'',
            hyid:'',
            hydjname:'',
            yxq:'',
            nfje:'',
            hydjid:'',
            kfdh:'',
            kfwx:'shangquanyun5',
            showCustomerServiceDialog:false,
            amountOptions:[]
        }
    },
    created() {
        this.hyid = this.$route.query.hyid
        this.queryHydjinfoList()
        this.queryHyinfo()
        this.queryKfdh()
        this.queryRecharsetting()
    },
    methods: {

    queryRecharsetting(){
        let that = this
        queryRecharsetting({}).then(res => {
            that.amountOptions = res.rows
        })
    },

        handleLxkf(){
            this.showCustomerServiceDialog = true
        },
        copyWechat(kfwx){
            // 复制微信号
            navigator.clipboard.writeText(kfwx).then(() => {
                this.$toast('复制成功');
            }).catch((err) => {
                this.$toast('复制失败，请稍后重试');
                console.error('复制失败:', err);
            });
        },
        queryHyinfo(){
            let that = this 
            const param = {
                hyid:this.hyid
            }
            getHyinfo(param).then(res => {
                if (res.code == 200) {
                    that.zhye = res.data.zhye
                }
            })
        },
        goBack() {
            this.$router.back()
        },
        queryHydjinfoList() {
            const param = {}
            queryHydjinfoList().then(res => {
                if (res.code == 200) {
                this.memberList = res.rows
                }
            })
        },
        openMember(member) {
        // 处理开通会员的逻辑，如跳转到支付页面等
            this.showConfirmDialog = true
            this.hydjname = member.name
            this.hydjid = member.hydjid
            this.czje = member.price
            const currentDate = new Date();
            currentDate.setFullYear(currentDate.getFullYear() + 1);
            const year = currentDate.getFullYear();
            const month = String(currentDate.getMonth() + 1).padStart(2, '0');
            const day = String(currentDate.getDate()).padStart(2, '0');
            this.yxq = `${year}年${month}月${day}日`;
            this.nfje = member.price
        },
        inquiryBusiness() {
        // 处理询盘商机的逻辑，如跳转到相关页面
            console.log('询盘商机')
            this.$router.push({ path: '/sjinfolist' })
        },
        callCustomerService() {
            window.location.href = 'tel:' + this.kfdh;
        },

        queryKfdh(){
            let that = this
            querySysConifgByKey({ configKey: 'khphone' }).then(res => {
                if (res.code == 200) {
                    that.kfdh = res.msg
                }
            })
        },

        doPay(){
            if(this.czje == ''){
                this.$toast('请输入充值金额')
                return
            }
            let that = this
            let param = {
                czje:this.czje,
                hyid:this.hyid,
                hydjid:this.hydjid,
                hydjname:this.hydjname,
                price:this.nfje
            }

            saveRechargehy(param).then(res => {
                if (res.code == 200) {
                    that.showConfirmDialog = false
                    let payurl = res.data.contenturl
                    // 假设 payurl 是一个 JSON 字符串，将其转换为 JSON 对象
                    let payObj = JSON.parse(payurl);
                    payObj.appId = 'wxd81a6bd295facda3'
                    // 调起微信支付
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', 
                        payObj,
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            // res.err_msg将在用户支付成功后返回get_brand_wcpay_request:ok，但并不保证它绝对可靠。
                            window.location.href = this.baseurl
                            // 可以在这里添加支付成功后的逻辑，例如更新订单状态等
                            setTimeout(() => {
                                that.querySjinfoBySjid()
                            }, 200);
                            } else {
                                that.$toast(res.msg)
                            } 
                        }
                    );
                }
            })
        }
    }
}
</script>

    <style scoped>
    .upgrade-member-page {
        background-color: #f7f7f7;
    }
    .member-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
    .member-type {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
    }
    .member-privilege {
        color: red;
        margin-top: 10px;
        font-size: 14px;

    }
    .agreement-section {
        margin-top: 20px;
    }
    .reminder {
        color: #999;
        margin-bottom: 10px;
        white-space: pre-wrap; /* 实现自动换行 */
        padding:5px;
        font-size: 14px;
        line-height: 1.5;
    }
    .agreement-title {
        font-weight: bold;
        margin-bottom: 5px;
        padding:5px;
    }
    .platform-promotion {
        color: #999;
        margin-top: 10px;
    }
    .bottom-buttons {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }
    .order-button-section {
        margin-bottom: 20px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .tip-section {
        color:#999;
        margin-bottom: 10px;
        font-size: 15px;
    }
    .recharge-section {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        width:100%;
        font-size:15px;
    }
</style>
